<template>
  <div class="transactionDetailContainer">
    <TopBar>资金明细</TopBar>
    <header>
      <tab :line-width="1" custom-bar-width="1.1rem"  style="margin-top:1.5rem">
        <tab-item selected @click.native="getList(-1)">全部</tab-item>
        <tab-item @click.native="getList(1)">返利</tab-item>
        <tab-item @click.native="getList(0)">提现</tab-item>
    </tab>
    </header>
    <section class="transactionDetailContent">
      <div class="itemRow vux-1px-b" v-for="item in currentList" :key="item.id">
        <p class="row row1">
          <span v-text="item.title"></span>
          <span class="itemChange" :style="item.type == 2?red:null" v-text="item.money"></span>
        </p>
        <p class="row row2">
          <span v-text="item.time"></span>
          <span v-text="item.yue"></span>
        </p>
      </div>
    </section>
  </div>
</template>
<script>
import TopBar from '../../component/common/TopBar'
import { Tab, TabItem } from 'vux'
import {getTransation1,getTransation2,getTransation} from '../../../service/getData'
import {getStore} from '../../../config/mUtils'
import {getSDK} from '../../../service/wxShare.js'

export default {
  components:{
    TopBar,
    Tab,
    TabItem,
  },
  beforeCreate(){
      getSDK()
    },
  created(){
    this.getList(-1)
  },
  data(){
    return {
      listItems:[
        // {
        //   name:'提现',
        //   date:'2018-1-23 13:45:12',
        //   change:'-20.00',
        //   total:'40.00',
        //   type:0
        // },
        // {
        //   name:'微贷网返利',
        //   date:'2018-2-1 13:45:12',
        //   change:'+10.00',
        //   total:'60.00',
        //   type:1
        // },
        // {
        //   name:'微贷网返利',
        //   date:'2017-12-1 13:45:12',
        //   change:'+10.00',
        //   total:'60.00',
        //   type:1
        // },
        // {
        //   name:'提现',
        //   date:'2017-11-23 13:45:12',
        //   change:'-20.00',
        //   total:'40.00',
        //   type:0
        // },
        // {
        //   name:'微贷网返利',
        //   date:'2016-12-11 13:45:12',
        //   change:'+10.00',
        //   total:'60.00',
        //   type:1
        // },
        // {
        //   name:'微贷网返利',
        //   date:'2015-12-12 13:45:12',
        //   change:'+10.00',
        //   total:'60.00',
        //   type:1
        // },
      ],
      currentList:[],
      red:{
        color:'#dd3832'
      },
      type:-1
    }
  },
  methods:{
    getList(type){
      this.currentList =[];
      switch(type){
        case -1 :
          getTransation(getStore('loginkey'))
            .then(res=>{
              // console.log(res);
              this.currentList = res.list
            })
        break;
        case 1 :
          getTransation1(getStore('loginkey'))
            .then(res=>{
              // console.log(res);
              this.currentList = res.list
            })
        break;
        case 0 :
          getTransation2(getStore('loginkey'))
            .then(res=>{
              // console.log(res);
              this.currentList = res.list
            })
        break;
      }
    },
  }
}
</script>
<style lang="less">
@import '../../../style/mixin.less';

.transactionDetailContainer{
  .vux-tab .vux-tab-item.vux-tab-selected{
    color: #dd3832;
    border-bottom: 3px solid #dd3832;
  }
  span.vux-tab-bar-inner{
    background-color:#dd3832;
  }
  .transactionDetailContent{
    .wh(90%,100%);
    .cl();
    .itemRow{
      .wh(100%,1.7067rem);
      .fx(column,center,flex-start);
      .row{
        width: 100%;
        .fx(row,space-between,center);
      }
      .row1{
        font-size: 0.4rem;
        .itemChange{
          font-weight: bold;
        }
      }
      .row2{
        color:#939393;
      }
    }
  }
}
</style>
